<template>
    <div class="page-container">
        <div class="grid-container">
            <a-row type="flex" class="grid-table-tool">
                <a-col :span="10" :order="1" class="tool-action">
                    <a-input-search placeholder="请输入关键词,例如:分类名称" v-model="params.name" @search="onSearch" style="width:300px;">
                        <a-button icon="search" type="primary" slot="enterButton">筛选</a-button>
                    </a-input-search>
                </a-col>
                <a-col :span="14" :order="2" class="tool-pagination">
                    <a-button type="primary" icon="plus" @click="onAdd">新增</a-button>
                </a-col>
            </a-row>
            <a-table bordered :columns="columns" :dataSource="dataList" :scroll="{ y: tableHeight }" :defaultExpandAllRows="true" :pagination="false" :loading="loading" :rowKey="record => record.id" size="middle">
                <template slot="index" slot-scope="text,record,index">{{index+1}}</template>
                <template slot="sort" slot-scope="text,record,index">
                    <a-button class="ant-btn-iconText" size="small" @click="onSortTop(record)" v-if="index!=0"><i class="iconfont icon-zhiding" /></a-button>
                    <a-button class="ant-btn-iconText" size="small" icon="arrow-up" @click="onSortUp(record,index)" v-if="index!=0"></a-button>
                    <a-button class="ant-btn-iconText" size="small" icon="arrow-down" @click="onSortDown(record,index)"
                              v-if="(record.isLeaf == false && index < record.length-1) || (record.isLeaf == true && index < record.length-1)"></a-button>
                    <a-button class="ant-btn-iconText" size="small" icon="minus" v-if="record.length <=1"></a-button>
                </template>
                <template slot="status" slot-scope="text,record">
                </template>
                <template slot="operation" slot-scope="text,record">
                    <a-switch checkedChildren="启用" unCheckedChildren="禁用" @change='onChangeStatus(record.id,record.status)'  :checked="record.status=='AVAILABLE'" />
                    <a-divider type="vertical" />
                    <a class="ant-btn-text" @click="onEdit(record)"><a-icon type="form" /></a>
                    <a-divider type="vertical" v-if="record.parentId == 0" />
                    <a class="ant-btn-text" v-if="record.parentId == 0" @click="onAddChild(record)" title="添加子级分类"><a-icon type="plus" /></a>
                    <a-divider type="vertical" v-if="record.level>1" />
                    <a class="ant-btn-text" @click="onDeleted(record)" v-if="record.level>1"><a-icon type="delete" /></a>
                </template>
            </a-table>
        </div>
        <a-modal  :title="title" v-model="editVisible" :footer="null">
            <goods-type-edit v-if="editVisible" :model="model" :parent="parent" @onCancel="emitEdit"></goods-type-edit>
        </a-modal>
    </div>
</template>
<script>
    import {findTreeList,changeStatus,changeSort,deleted} from "../../api/goodsType";
    import GoodsTypeEdit from "./components/GoodsTypeEdit"
    let tableHeight = Math.max(document.body.scrollHeight,document.documentElement.scrollHeight) - 220;
    const columns = [
        {title: '分类名称',dataIndex: 'name',width: 300,align:'left'},
        {title: '备注',dataIndex: 'remark',align:'left'},
        {title: '排序',key: 'sort',align:'center',width: 200, scopedSlots: { customRender: 'sort' }},
        // {title: '状态',key: 'status',align:'center',width: 120, scopedSlots: { customRender: 'status' }},
        {title: '操作',key: 'operation',align:'center',width: 220,scopedSlots: { customRender: 'operation' }},
    ];
    export default {
        components:{GoodsTypeEdit},
        data() {
            return {
                tableHeight:tableHeight,
                dataList: [],
                columns,
                params:{
                    name:'',
                },
                total:0,
                loading:false,
                title:'新增分类',
                model:null,
                parent:null,
                editVisible:false,
            }
        },
        methods: {
            onSearch(){
                this.onLoad();
            },
            //上移
            onSortUp(record,index){
                var upId = 0;
                if(record.children && record.children.length >0){
                    upId = this.dataList[index-1].id;
                }else{
                    upId = this.dataList.filter(e=>e.id == record.parentId)[0].children[index-1].id;
                }
                this.onChangeSort('up',record.id,upId);
            },
            //下移
            onSortDown(record,index){
                var downId = 0;
                if(record.children && record.children.length >0){
                    downId = this.dataList[index+1].id;
                }else{
                    downId = this.dataList.filter(e=>e.id == record.parentId)[0].children[index+1].id;
                }
                this.onChangeSort('down',record.id,downId);
            },
            //置顶
            onSortTop(record){
                this.onChangeSort('top',record.id,record.id);
            },
            //添加子级
            onAddChild(row){
                this.title = '新增分类'
                this.id = 0;
                this.parent = row;
                this.editVisible = true;
            },
            //添加同级
            onAdd(){
                this.title = '新增分类'
                this.id = 0;
                this.parent = null;
                this.editVisible = true;
            },
            emitAdd(){
                let _this = this;
                this.addVisible = false;
                this.$success({title:'保存成功!',okText:'确定',
                    onOk(){_this.onLoad();}})
            },
            async onChangeSort(type,id1,id2){
                this.loading = true;
                let param = {
                    id1:parseInt(id1),id2:parseInt(id2),type:type
                }
                let resp = await changeSort(param);
                this.loading = false;
                if(this.qUtil.validResp(resp)){
                    this.$message.success("操作成功!");
                    this.onLoad();
                }else{
                    this.$warning({title:'操作失败!',okText:'确定'});
                }
            },
            //改变状态
            onChangeStatus(id,status){
                let statusStr = "";
                statusStr = status=='AVAILABLE'?'禁用':'启用';
                let _this = this;
                this.$confirm({
                    title: '确认'+statusStr+'该单位信息吗?',
                    okText: '确认',
                    okType: 'danger',
                    cancelText: '取消',
                    onOk() {
                      status = status=='AVAILABLE'?'FREEZE':'AVAILABLE';
                        _this.handleChangeStatus(id,status);
                    }, onCancel() {},
                })
            },
            async handleChangeStatus(id,status){
                let resp = await changeStatus(id,status);
                if(this.qUtil.validResp(resp)){
                    this.$message.success("状态已修改");
                    this.onLoad();
                }else{
                    this.$message.error(resp.msg||'修改失败')
                }
            },
            //编辑
            onEdit(row){
                this.title = '编辑分类'
                this.model = row;
                let parent = null
                if(row.parentId>0){
                    parent = this.dataList.find(m=>m.id === row.parentId)
                }
                this.parent = parent;
                this.editVisible = true;
            },
            emitEdit(){
                let _this = this;
                this.editVisible = false;
                this.$success({title:'保存成功!',okText:'确定',
                    onOk(){_this.onLoad();}})
            },
            onDeleted(record){
                let _this = this;
                this.$confirm({
                    title: '确认删除该商品分类信息吗?',
                    okText: '确认',
                    okType: 'danger',
                    cancelText: '取消',
                    onOk() {_this.handleDelete(record.id);},
                    onCancel() {},
                });
            },
            async handleDelete(id){
                let resp = await deleted(id);
                if(this.qUtil.validResp(resp)) {
                    this.$message.success("状态已修改");
                    this.onLoad();
                }else{
                    this.$message.error(resp.msg||'修改失败')
                }
            },
            async onLoad(){
                this.loading = true;
                let resp = await findTreeList(this.params);
                console.log("=====resp",resp);
                this.loading = false;
                if(!this.qUtil.validResp(resp)) return false;
                this.dataList = resp.data.dataList;
            }
        },
        mounted(){
            this.onLoad();
        }
    }
</script>

